<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">

     <!-- 引入 editor.md 的依赖 -->
     <link rel="stylesheet" href="editor.md/css/editormd.min.css" >
     <!-- <script src="js/jquery.min.js"></script> -->
     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
     <script src="editor.md/lib/marked.min.js"></script>
     <script src="editor.md/lib/prettify.min.js"></script>
     <script src="editor.md/editormd.js"></script>
</head>
<body>
    <div class="nav">
        <img src="img/元宵汤圆.png" alt="">
        <span class="title">我的博客系统</span>
        <!-- spacer不显示任何内容,只是占位,把后面的a标签撑到后面去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="cancellation">注销</a>
    </div>
    <!-- 这个div表示页面的主区域(版心) -->
    <div class="container">
        <!-- 左侧用户信息 -->
        <div class="container-left">
            <!-- 用这个元素表示用户的信息 -->
            <div class="card">
                <img src="img/20201227170738_9f5ea.gif" alt="">
                <h3>哒哒</h3>
                <a href="https://gitee.com/tvt-yuan">gitee地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span class="blogcount"></span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧内容区域 -->
        <div class="container-right">
            <!-- 每个blog用来表示一篇博客 -->
            <!-- <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022-11-20 21:24:22</div>
                <div class="desc">从今天起我要认真敲代码
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni beatae excepturi amet, molestias aspernatur deserunt cum reprehenderit laboriosam alias soluta quod culpa ipsam dolorem? Nobis consequuntur porro repudiandae sequi officiis.
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae libero culpa porro nostrum. Cupiditate, quos perferendis! Reiciendis ipsa, repudiandae quae debitis temporibus ab, hic incidunt mollitia consectetur rem quas ratione.
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo, totam nisi tenetur, laudantium accusantium dolores ex earum saepe nam cumque veritatis nobis, voluptatem vitae quam aperiam labore id eaque neque?
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim dolores unde dolore, provident, eius ullam velit corporis necessitatibus id vel obcaecati, alias vero magni quibusdam rem fugiat? Placeat, minima nam!
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt natus iste, porro, eveniet quod animi corrupti vel numquam atque optio reiciendis sit dolorem ut sapiente tempora, inventore explicabo laudantium? Error.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint sit molestias commodi! Quisquam, quam a tempora magnam numquam earum voluptas maiores odit eos maxime facilis, dolor doloremque esse libero reprehenderit!
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt;</a>
            </div> -->
            
        </div>
    </div>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="js/login.js"></script>
   <script src="js/user.js"></script>
    <script>
        //发送ajax从服务器获取数据
        function getBlogs() {
            $.ajax({
                type : 'get',
                contentType : 'application/json;charset=utf8',
                url : 'blog',
                success : function(body) {
                    //获取成功,则body就是一个js对象数组,每个元素就是一个博客
                    let container = document.querySelector('.container-right');
                    for(let blog of body) {
                        //构造blogDiv
                        let blogDiv = document.createElement('div');
                        blogDiv.className = 'blog';

                        let titleDiv = document.createElement('div');
                        titleDiv.className = 'title';
                        titleDiv.innerHTML = blog.title;

                        let dateDiv = document.createElement('div');
                        dateDiv.className = 'date';
                        dateDiv.innerHTML = blog.postTime;

                        let descDiv = document.createElement('div');
                        descDiv.className = 'desc';
                        descDiv.innerHTML = blog.content;

                        let aDiv = document.createElement('a');
                        aDiv.innerHTML = '查看全文 &gt;&gt;'
                        aDiv.href = 'blog_detail.html?blogId='+ blog.blogId;

                        blogDiv.appendChild(titleDiv);
                        blogDiv.appendChild(dateDiv);
                        blogDiv.appendChild(descDiv);
                        blogDiv.appendChild(aDiv);

                        container.appendChild(blogDiv);

                    }
                }
            });
        }
        getLogin();
        getUsers();
        getBlogs();
    </script>
</body>
</html>